<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>订单列表</title>
    <link rel="stylesheet" href="css/order-list.css" />
</head>
<body>

<div class="order-list-box">
    <!--订单列表开始-->
       <div class="o-l-head">订单详情
           <a href=""><div class="o-l-creat">创建订单</div></a>
       </div>

    <div class="o-l-show">
        <div class="o-l-s-head">
            <div class="o-l-s-1">订单号</div>
            <div class="o-l-s-2">订单状态</div>
            <div class="o-l-s-3">生成日期</div>
            <div class="o-l-s-4">价格</div>
            <div class="o-l-s-5">操作</div>
        </div>
        <!--已支付-->
        <div class="o-l-s-wzf">
            <div class="o-l-s-w1">01</div>
            <div class="o-l-s-w2">未支付</div>
            <div class="o-l-s-w3">2017.11.15</div>
            <div class="o-l-s-w4">23000.00RMB</div>
            <div class="o-l-s-w5">
                <a href="">去&nbsp;支&nbsp;付</a>
            </div>
        </div>
        <!--未支付-->
        <div class="o-l-s-yzf">
            <div class="o-l-s-y1">02</div>
            <div class="o-l-s-y2">已支付</div>
            <div class="o-l-s-y3">2017.11.15</div>
            <div class="o-l-s-y4">23000.00RMB</div>
            <div class="o-l-s-y5">
                <div class="o-l-s-y5c">查看订单</div>
            </div>
        </div>
    </div>
    <!--订单列表结束-->


    <!--订单详情开始-->
    <div class="order-detail-box">
         <div class="order-detail-con">
             <div class="o-d-close"></div>
             <div class="o-d-title">订单详情：</div>
             <div class="o-d-c-1">校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</div>
             <div class="o-d-c-2">
                 <span>上海校区</span>
             </div>
             <div class="o-d-c-3">课号</div>
             <div class="o-d-c-4">
                 <text id="course" class="o-d-c-4-1">
                     <span class="o-d-c-4-con">ECON202</span>
                     <span class="o-d-c-4-con">ECON202</span>
                     <span class="o-d-c-4-con">ECON202</span>
                     <span class="o-d-c-4-con">ECON202</span>
                 </text>
             </div>
             <div class="o-d-c-5">支付时间</div>
             <div class="o-d-c-6">
                 <span>2017年11月15日</span>
             </div>
             <div class="o-d-c-7">价格</div>
             <div class="o-d-c-8">
                 <span>￥30,000元</span>
             </div>
             <div class="o-d-c-9">支付方式</div>
             <div class="o-d-c-10">
                 <span>支付宝</span>
             </div>
             <div class="o-d-del">删除记录</div>
         </div>
    </div>
    <!--订单详情结束-->
</div>
<script>
    var o_l_s_y5c=document.querySelector('.o-l-s-y5c');
    var order_detail_box=document.querySelector('.order-detail-box');
    var o_d_close=document.querySelector('.o-d-close');
    var o_d_del=document.querySelector('.o-d-del');

    o_l_s_y5c.onclick=function(){
       order_detail_box.style.display="block";
    };
    o_d_close.onclick=function(){
        order_detail_box.style.display="none";
    };
    o_d_del.onclick=function () {
        //
        order_detail_box.style.display="none";
    }

</script>
</body>
</html>